<script type="text/javascript">
    var y_axis_bar = <?php echo json_encode($data['bar']['y_axis']);?>;
    var x_axis_bar = <?php echo json_encode($data['bar']['x_axis']);?>;
    var graph_title_bar = <?php echo json_encode($graph_title_bar);?>;
    var pie_data = <?php echo json_encode($data['pie']['data']);?>;
    var graph_title_pie = <?php echo json_encode($graph_title_pie);?>;
</script>
<div class="" id="container">

    <?php echo $this->element('contributions/jump_menu'); ?>

    <div class="row">

        <div class="col-lg-6">
            <div class="panel">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-lg-12">Weekly Consolidated Contributions</div>
                    </div>
                </div>

                <div class="panel-body m-b-none">
                    <div id="bar-content"></div>
                    <script type="text/javascript">
                        $(function () {
                            $(document).ready(function() {
                                var options_bar = {
                                    chart: {
                                        renderTo: 'bar-content',
                                        type: 'column'
                                    },
                                    title: {
                                        text: graph_title_bar
                                    },
                                    xAxis: {
                                        categories: x_axis_bar
                                    },
                                    yAxis: {
                                        min: 0,
                                        title: {
                                            text: 'Amount'
                                        },
                                        stackLabels: {
                                            enabled: true,
                                            style: {
                                                fontWeight: 'bold',
                                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                                            },
                                            formatter:function(){
                                                return this.total
                                            }
                                        }
                                    },
                                    tooltip: {
                                        formatter: function(series) {
                                            return ''+this.series.name +': '+ this.y +' ';
                                        }
                                    },
                                    plotOptions: {
                                        column: {
                                            stacking: 'normal',
                                            dataLabels: {
                                                enabled: true,
                                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                                                formatter:function(){
                                                    return this.y
                                                }
                                            },
                                            pointPadding: 0.2,
                                            borderWidth: 0
                                        }
                                    },
                                    series: y_axis_bar
                                };
                                var chart_bar = new Highcharts.Chart(options_bar);
                            });
                        });
                    </script>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="panel m-b-none" id="contributions_view">
                <div class='panel-heading'>
                    <div class='row'>
                        <div class='col-lg-12'>
                            Consolidated Contributions
                        </div>
                    </div>
                </div>
                <div class="panel-body m-b-none">
                    <div id="pie-content"></div>
                    <script type="text/javascript">
                        $(function () {
                            $(document).ready(function() {
                                var options_pie = {
                                    chart: {
                                        renderTo: 'pie-content',
                                        type: 'pie',
                                        plotBackgroundColor: null,
                                        plotBorderWidth: null,
                                        plotShadow: false
                                    },
                                    title: {
                                        text: graph_title_pie
                                    },
                                    tooltip: {
                                        percentageDecimals: 1,
                                        formatter: function(series) {
                                            return ''+this.series.name +':   <b>'+ this.point.y +' <br />  '+ this.point.percentage.toFixed(1) +'%';
                                        }
                                    },
                                    plotOptions: {
                                        pie: {
                                            showInLegend: true,
                                            allowPointSelect: true,
                                            cursor: 'pointer',
                                            dataLabels: {
                                                enabled: true,
                                                color: '#000000',
                                                //distance: -30,
                                                formatter: function() {
                                                    return '<b>'+ this.point.name  +'  <br /> '+ this.point.y +'  <br />  ' + this.percentage.toFixed(1) +' %</b> ';
                                                }
                                            }
                                        }
                                    },
                                    series: [{
                                        type: 'pie',
                                        name: 'share',
                                        data: pie_data
                                    }]
                                };
                                var chart_pie = new Highcharts.Chart(options_pie);
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" id="charts-data-url" value="<?php echo $this->Html->url(array('controller' => 'charts', 'action' => 'member_stats')); ?>" />
<input type="hidden" id="birthdays-data-url" value="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'birthdays')); ?>" />

<?php
echo $this->Html->script('app/views/organisations/contributions_home.js');

?>